<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>系统资源</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script type="text/javascript"  src="http://www.ijquery.cn/js/html5shiv.js"></script>
    <![endif]-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-1.12.4.min.js">\x3C/script>')</script>
    <!--也可以用yepnopejs 加载器;直接是window对象-->
    <!-- bootstrap 3.0.2 -->
    <!--Font Awesome  一套绝佳的图标字体库和CSS框架 无需依赖JavaScript 无限缩放  完全免费 jquery-confirm里面用到 官网http://fontawesome.dashgame.com/-->
    <link href="css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap-3.2.0/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-box.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-page.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="js/resizableColumns/jquery.resizableColumns.css">
    <link href="js/nice-validator/jquery.validator.css" rel="stylesheet" type="text/css"/>
    <link href="css/myStyle.css" rel="stylesheet" type="text/css"/>
    <link href="js/jquery-confirm/jquery-confirm.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-confirm/jquery-confirm.js"></script>
    <script type="text/javascript" src="js/resizableColumns/jquery.resizableColumns.js"></script>
    <script type="text/javascript" src="js/jsviews.js"></script>
    <script type="text/javascript" src="js/loadTmpl.js"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript" src="js/tableGrid/jquery.tableGrid.js"></script>
    <script type="text/javascript" src="js/nice-validator/jquery.validator.min.js"></script>
    <script type="text/javascript" src="js/nice-validator/local/zh-CN.js"></script>
    <script type="text/javascript" src="js/layer/layer.js"></script>
    <script type="text/javascript">
        $.views.converters({
            "isSelected": function (first, last) {
                if (first == null) return "";
                return first.parentId == last ? "selected=selected" : "";
            },
            "showTypeSelected": function (first, last) {
                if (first == null) return "";
                return first.showType == last ? "selected=selected" : "";
            }
        });
        //从后台取数据，并加载模板
        function displayContent() {
            var search_resourceName =  $("#search_resourceName").val();
            var search_showType     =  $("#search_showType").val();
            var nextPage            =  $("#_click_page").val();			//不变
            if (typeof(nextPage) == 'undefined' || nextPage == "") {
                nextPage = 0;
            }
            var pageSize = $("#selectPageSize").val();
            if (typeof(pageSize) == 'undefined' || pageSize == "") {
                pageSize = 10;
            }
            var url = root + "xaCmsResource/showResource";
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'post',
                data: {
                    nextPage    : nextPage,
                    pageSize    : pageSize,
                    showType    : search_showType,
                    resourceName: search_resourceName
                },
                success: function (data) {
                    var tableData = data.object.content;
                    var tblContentHtml = $("#tableContentTmple").render(tableData);
                    $("#mycontent").html(tblContentHtml);
                    //去掉复选状态
                    $("#_selectAll").prop({checked: false});
                    //加载分页器
                    loadTmpl.renderExternalTemplate("page", "#displayPage", data.object);
                }
            });
        }
        //从后台取数据，并加载模板
        function displayContent1(search) {
            if (search == 1) {
                nextPage = 0;
            }
            var search_resourceName = $("#search_resourceName").val();
            var search_showType     =  $("#search_showType").val();
            //var nextPage=$("#_click_page").val();			//不变
            if (typeof(nextPage) == 'undefined' || nextPage == "") {
                nextPage = 0;
            }
            var pageSize = $("#selectPageSize").val();
            if (typeof(pageSize) == 'undefined' || pageSize == "") {
                pageSize = 10;
            }
            var url = root + "xaCmsResource/showResource";
            $.ajax({
                url: url,
                dataType: 'json',
                type: 'post',
                data: {
                    nextPage: nextPage,
                    pageSize: pageSize,
                    showType    : search_showType,
                    resourceName: search_resourceName
                },
                success: function (data) {
                    var tableData = data.object.content;
                    var tblContentHtml = $("#tableContentTmple").render(tableData);
                    $("#mycontent").html(tblContentHtml);
                    //去掉复选状态
                    $("#_selectAll").prop({checked: false});
                    //加载分页器
                    loadTmpl.renderExternalTemplate("page", "#displayPage", data.object);
                }
            });
        }
        $(function () {
            $("#example2").resizableColumns({});	//列拖动
            //行高亮,选中
            $("#example2").tableGrid({
                checkAllId: "_selectAll",	//全选框的ID属性
                singleCheckboxClass: "ckSelect",
                selectRowClass: "warning",
                paging: "displayPage",
                pageAjax: function () {
                    displayContent();
                }
            });
            //点击新增按钮
            $("#addSome").click(function () {
                $.ajax({
                    url: root + "xaCmsResource/showParent/" + 0,
                    type: 'get',
                    dataType: 'json',
                    success: function (selectData) {
                        if (Object.keys(selectData).length === 0) selectData = "";		//判断后台传的集合为空，当集合为空时，jsrender不加载模板
                        var selectContentHtml = $("#newOrupdateTmpl").render(selectData);
                        $("#myModal").html(selectContentHtml);
                        $("#myModal").modal();
                    }
                });
            });

            //新增或修改
            $(document).on('click', "#saveOrupdate", function () {
                $("#validateForm").isValid(function (result) {
                    if (!result) {
                        myAlert("还有未填写或选择的字段，请检查！");
                        return;
                    }
                    var resourceId1 = $("#resourceId1").val();
                    var resourceName1 = $("#resourceName1").val();
                    var resourceUrl1 = $("#resourceUrl1").val();
                    var parentId1 = $("#parentId1").val();
                    var showType1 = $("#showType1").val();
                    var resource = "";
                    var url = "";
                    if (resourceId1 == "") {
                        //新增
                        resource = {
                            "resourceName": resourceName1,
                            "resourceUrl": resourceUrl1,
                            "parentId": parentId1,
                            "showType": showType1
                        };
                        url = root + "xaCmsResource";
                        $.ajax({
                            url: url,
                            type: "post",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify(resource),
                            success: function (data) {
                                if (typeof(data) == 'string') {
                                    data = JSON.parse(data);
                                }
                                if (data.status == 1) {
                                    $('#myModal').modal('hide');
                                    displayContent();
                                }
                            }
                        });
                    } else {
                        //修改
                        resource = {
                            "resourceId": resourceId1,
                            "resourceName": resourceName1,
                            "resourceUrl": resourceUrl1,
                            "parentId": parentId1,
                            "showType": showType1
                        };
                        url = root + "xaCmsResource/update";
                        console.log(JSON.stringify(resource));
                        $.ajax({
                            url: url,
                            type: "PUT",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify(resource),
                            success: function (data) {
                                if (typeof(data) == 'string') {
                                    data = JSON.parse(data);
                                }
                                if (data.status == 1) {
                                    $('#myModal').modal('hide');
                                    displayContent();
                                }
                            }
                        });
                    }
                });
            });
            //点击修改按钮
            $("#updateSome").click(function () {
                var updateArray = new Array();
                $(".ckSelect").each(function () {
                    var check = $(this).is(':checked');
                    if (check) {
                        var _id = $(this).attr("ckId");
                        updateArray.push(_id);
                    }
                });
                if (updateArray.length == 0) {
                    myAlert("请选择要编辑的项");
                    return;
                }
                if (updateArray.length > 1) {
                    myAlert("每次只能编辑一项");
                    return;
                }
                $.ajax({
                    url: root + "xaCmsResource/showParent/" + updateArray[0],
                    type: "get",
                    dataType: "json",
                    contentType: "application/json",
                    success: function (selectData) {
                        if (typeof(selectData) == 'string') {
                            selectData = JSON.parse(selectData);
                        }
                        if (Object.keys(selectData).length === 0) selectData = "";		//判断后台传的集合为空，当集合为空时，jsrender不加载模板
                        var selectContentHtml = $("#newOrupdateTmpl").render(selectData);
                        $("#myModal").html(selectContentHtml);
                        $("#myModal").modal();
                    }
                });
            });
            //点击查询按钮
            $("#search").click(function () {
                displayContent1(1);
            });
            //点击删除按钮
            $("#delSome").click(function () {
                var delStr = "";
                var delArray = new Array();
                $(".ckSelect").each(function () {
                    var check = $(this).is(':checked');
                    if (check) {
                        var _id = $(this).attr("ckId");
                        delStr += parseInt(_id) + ",";
                        delArray.push(_id);
                    }
                });
                if (delStr.length == 0) {
                    myAlert("请选择要删除的项");
                    return
                }
                for (var i = 0; i < delArray.length; i++) {
                    if (delArray[i] == 1) {
                        myAlert("首页不能删除");
                        return;
                    }
                    myAlert("资源不能随便删除");
                    return;
                }
                //段大志修改
                //return;
                myConfirm("你确定要删除选中项吗？", function () {
                    var delIds = "{ids:\"" + delArray + "\"}";
                    var url = root + "xaCmsResource/resource/" + delIds;
                    $.ajax({
                        url: url,
                        type: 'DELETE',
                        dataType: 'json',
                        success: function (data) {
                            if (typeof(data) == 'string') {
                                data = JSON.parse(data);
                            }
                            if (data.status == 1) {
                                displayContent();
                            } else if (data.status == -1) {
                                myAlert("请先删除子资源，再删除父资源");
                            } else if (data.status == 0) {
                                myAlert("找到要删除的资源");
                            }
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
<section>
    <div>
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">

                    <form id="search_form" class="form-horizontal">
                        <div class="tabSelect" id="selectHeadId">
                            <br>
                            <div class="form-group  col-md-4 search-form">
                                <label class="col-md-4 control-label controls">资源名称：</label>
                                <div class="col-md-8">
                                    <input type="text" placeHolder="资源名称" class="form-control input-sm" name="search_resourceName"
                                           style="width:200px;float:left;margin-right:20px;" id="search_resourceName"/>
                                </div>
                            </div>

                            <div class="form-group  col-md-3 search-form">
                                <label class="col-md-4 control-label controls">资源级别：</label>
                                <div class="col-md-8">
                                    <select class="form-control input-sm" id="search_showType"
                                            name="search_showType">
                                        <option value="">请选择</option>
                                        <option value="0">页面级</option>
                                        <option value="1">按钮级</option>
                                        <option value="2">菜单级别</option>
                                    </select>
                                </div>
                            </div>

                            <input type="button" value="搜索" id="search" class="searchBtn">
                        </div>
                    </form>
                </div>
                <div class="box-header">
                    <input type="button" value="新增" id="addSome" class="btn btn-success">
                    <input type="button" value="删除" id="delSome" class="btn btn-danger">
                    <input type="button" value="编辑" id="updateSome" class="btn btn-info">
                </div>
                <div class="box-body table-responsive">
                    <table id="example2" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th><input type="checkbox" id="_selectAll"/></th>
                            <th id='parentName'>父资源</th>
                            <th id='resourceName'>资源名称</th>
                            <th id='showType'>资源级别</th>
                            <th id='resourceUrl'>URL</th>
                        </tr>
                        </thead>
                        <!-- 表格内容 start -->
                        <tbody id="mycontent"></tbody>
                        <!-- 表格内容 end -->
                    </table>
                    <!-- 分页标签 start -->
                    <div class="row page_big_div" id="displayPage"></div>
                    <!-- 分页标签 end -->
                    <script id="tableContentTmple" type="text/x-jsrender">
								<tr><td><input id="ck_{{:resourceId}}" ckId="{{:resourceId}}" class="ckSelect" type="checkbox" /></td><td>{{if parentResourceName && parentResourceName!="null"}}{{:parentResourceName}}{{else}}{{/if}}</td><td>{{:resourceName}}</td><td>{{if showType==0}}页面级{{else showType==1}}按钮级{{else}}菜单级{{/if}}</td><td>{{:resourceUrl}}</td></tr>

                    </script>
                </div>
            </div>
        </div>
</section>
<!-- 新增对话框  start -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
</div>

<script type="text/x-jsrender" id="newOrupdateTmpl">
<form id="validateForm" class="form-horizontal">
	<div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" 
               data-dismiss="modal" aria-hidden="true">
                  &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
{{if selectedId}}
               修改资源信息
{{else}}
               新增资源信息
{{/if}}
            </h4>
         </div>
         <div class="modal-body">
            <fieldset> 
				<div class="form-group">
					<label for="userPhoto2" class="col-sm-3 control-label">资源名称：</label>
					<div class="col-sm-5">
					{{if selectedId}}
						<input type="text" class="form-control" placeholder="请填写资源名称" data-rule="资源名称:required;length[2~30]" id="resourceName1" name="resourceName" value="{{:selectedId.resourceName}}" />
						<input type="hidden" id="resourceId1" value="{{:selectedId.resourceId}}" />
					{{else}}
						<input type="text" class="form-control" placeholder="请填写资源名称"  data-rule="资源名称:required;length[2~30]" id="resourceName1" name="resourceName" />
						<input type="hidden" id="resourceId1" />
					{{/if}}
					</div>
				</div>
				<!-- Select Basic -->
				<div class="form-group" id="parentResourceContainer">
					<label for="userType" class="col-sm-3 control-label">父资源：</label>
					<div class="col-sm-5">
					<select id="parentId1" name="parentId" class="form-control input-sm">
						<option value="">选择父资源</option>
						{{for optionItem}}
							<option value="{{:resourceId}}" {{isSelected:#parent.parent.data.selectedId resourceId}}>{{:resourceName}}</option>
						{{/for}}
					</select>
					</div>
				</div>
				<div class="form-group" id="parentResourceContainer">
					<label for="userType" class="col-sm-3 control-label">资源类别：</label>
					<div class="col-sm-5">
					<select id="showType1" name="showType1"  data-rule="required;" class="form-control input-sm">
						<option value="">选择资源类别</option>
						<option value="0" {{showTypeSelected:selectedId 0}}>页面级</option>
						{{!--<option value="1" {{showTypeSelected:selectedId 1}}>按钮级</option>--}}
						<option value="2" {{showTypeSelected:selectedId 2}}>菜单级</option>
					</select>
					</div>
				</div>
				<div class="form-group">
					<label for="userPassword" class="col-sm-3 control-label">资源路径：</label>
					<div class="col-sm-5">
					{{if selectedId}}
						<input type="text" class="form-control input-sm" required="required;length[~255]" id="resourceUrl1"  placeholder="请输入资源相对路径" name="resourceUrl" value="{{:selectedId.resourceUrl}}"/>
					{{else}}
						<input type="text" class="form-control input-sm" required="required;length[~255]" id="resourceUrl1"  placeholder="请输入资源相对路径" name="resourceUrl"/>
					{{/if}}
					</div>
				</div>
			</fieldset>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" 
               data-dismiss="modal">关闭
            </button>
            <button type="button" id="saveOrupdate" class="btn btn-primary">确定</button>
         </div>
      </div>
</form>
</script>
<!-- 新增对话框  end -->

</body>
</html>